<!--
 * @Author: your name
 * @Date: 2021-07-21 10:24:21
 * @LastEditTime: 2021-07-21 10:58:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \马豫淅7.21\app\src\views\home\home.vue
-->
<template>
  <div class="home">
    <van-nav-bar
      title="多家网"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3" :border="false">
      <van-grid-item
        v-for="value in 6"
        :key="value"
        icon="photo-o"
        text="成单奖励"
      />
    </van-grid>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  methods: {
    onClickLeft() {
      Toast("返回");
    },
  },
};
</script>

<style lang='scss'>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #333;
  overflow-y: auto;
  .van-nav-bar {
    background: #333;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-grid-item__icon {
    font-size: 20px;
    background: goldenrod;
    padding: 15px;
    border-radius: 50%;
  }
  .van-grid-item__content--center {
    background: #333;
  }
  .van-grid-item__text {
    color: #fff;
  }
  .van-swipe {
    position: relative;
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 20px;
    margin: 10px 20px;
  }
}
</style>